<template>
  <div class="blog-box flex-column">
    <blog-header v-if="blogTitle" :blogTitle="blogTitle" :tags="tags" />
    <article class="markdown-body" id="markdownBody">
      <div class="blog-content" v-html="blogContent">
        {{ blogContent }}
      </div>
    </article>

    <blog-nav
      v-if="blogNavs.length > 0"
      :blogNavs="blogNavs"
      :blogNavIndex="blogNavIndex"
      @goScroll="goScroll"
    />
  </div>
</template>

<script>
import BlogHeader from './components/BlogHeader'
import BlogNav from './components/BlogNav'
import httpUtil from '@utils/HttpUtil'

export default {
  name: 'Blog',
  components: { BlogHeader, BlogNav },
  data() {
    return {
      blogContent: '',
      tags: [],
      blogTitle: '',
      blogNavs: [],
      blogNavIndex: 0
    }
  },
  mounted() {
    this.goBlog(this.$route.params.id)
    // window.addEventListener('scroll', this.onScroll, true)
  },
  methods: {
     goBlog(id) {
      const url = this.$ServerIP + `/api/blogs/${id}`
      this.isLoading = true
      httpUtil.get(url).then(json => {
        const { status } = json
        if (status !== 1) {
          this.$message({
            message: '服务器异常',
            type: 'error'
          })
          return
        }
        const { dataset: { blogContent, tags, blogTitle } } = json
        this.blogContent = blogContent
        this.tags = tags
        this.blogTitle = blogTitle
        this.getBlogNav()
      }).finally(() => {
        this.isLoading = false
      })
    },
    getBlogNav() {
      this.$nextTick(() => {
        const navsD = [...document.querySelectorAll('h2')]
        const blogNavNames = navsD.map(item => item.innerHTML)
        const len = blogNavNames.length
        const offsetTops = navsD.map(item => item.offsetTop)
        const blogNavs = []
        for (let i = 0; i < len; i++) {
          const blogNav = {
            name: blogNavNames[i],
            offsetTop: offsetTops[i]
          }
          blogNavs.push(blogNav)
        }
        this.blogNavs = blogNavs
      })
    },
    // 监听滚动,滚动条和右边目录联动
    onScroll() {
      this.$nextTick(() => {
        const navsD = [...document.querySelectorAll('h2')]
        const offsetTops = navsD.map(item => item.offsetTop)
        const scrollTop = document.getElementById('markdownBody').scrollTop
        let navIndex = 0
        for (let i = 0; i < offsetTops.length; i++) {
          if (scrollTop >= (offsetTops[i])) {
            navIndex = i
          }
        }
        this.blogNavIndex = navIndex
      })
    },
    goScroll(index, offsetTop) {
      this.blogNavIndex = index
      document.getElementById('markdownBody').scrollTop = parseInt(offsetTop) - 80
    }
  },
  destroy() {
    // window.removeEventListener('scroll', this.onScroll)
  }
}
</script>

<style scoped lang="less">
@import "~@styles/github-markdown.css";

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
.blog-box {
  .markdown-body {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 20px;
    height: calc(100vh - 70px);
    overflow-y: auto;
  }
}
</style>